<template>
  <div class="app-container" style="padding: 8px;">
    <div class="head-container">
      <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
        <el-form-item label="输入sql" prop="body">
          <el-input v-model="form.body" style="weight:75%;" rows="15" type="textarea"/>
        </el-form-item>
        <el-form-item label="">
          <el-button :loading="doSubmitLoading" size="medium" type="primary" @click="doSubmit">生成</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body-container" style="display:inline-block;margin-bottom:20px;">
    <pre>
        {{ bodyContainer }}
      </pre>
    </div>


  </div>

</template>

<script>
    import {exportDataToExcelFromSql} from '@/api/code-tools'
    import {downloadFileFunction} from "@/api/downloadFile"

    export default {
        components: {},
        data() {
            return {
                form: {
                    body: ''

                },
                bodyContainer: '',
                formatJson: '',
                doSubmitLoading: false,
                rules: {
                    body: [
                        {required: true, message: '字符串不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            doSubmit() {
                const sql = this.form.body;
                console.log(sql)
                let outputFileName = `data.xlsx`
                let param = {
                    sql: sql
                }
                exportDataToExcelFromSql(param
                ).then(res => {
                    downloadFileFunction(res, outputFileName)
                }).catch(err => {
                    this.loading = false
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>
</style>
